﻿<div id="createAccount" class="reveal-modal small" data-bind="modalSuccess: addOnSuccess, enterPressed: submit">
    <h2 data-bind="visible: isNew">New Storage Account</h2>
    <h2 data-bind="visible: !isNew()">Edit Storage Account</h2>
    <p>Note that all your accounts are stored locally in your browser. Under any condition we do not send your account key neither to our server nor any 3rd party server.</p>
    <div class="row" data-bind="with: account">
        <div class="large-2 columns">
            <label for="createContainer-name" class="right inline">Name:</label>
        </div>
        <div class="large-10 columns">
            <input id="createContainer-name" type="text" class="enter-focus" data-bind="instantValue: storageName, disable: devStorage, css: { error: !$parent.validName() }" />
        </div>
        <div class="large-2 columns">
            <label for="createAccount-key" class="right inline">Key:</label>
        </div>
        <div class="large-10 columns">
            <input id="createAccount-key" type="text" data-bind="instantValue: storageKey, disable: devStorage, css: { error: !$parent.validKey() }" />
        </div>
        <div class="large-4 columns">
            <label for="createAccount-devStorage" class="right inline">Development Storage:</label>
        </div>
        <div class="large-8 columns">
            <input id="createAccount-devStorage" type="checkbox" data-bind="checked: devStorage" />
        </div>
    </div>
     <ul class="error-summary" data-bind="visible: hasErrors()">
        @*<li>Container names must be unique within an account.</li>*@
        <li data-bind="visible: showNameRequired">Account name is required.</li>
        <li data-bind="visible: showKeyRequired">Account key is required.</li>
        <li data-bind="visible: showMustContainAlphaNumericDashesOnly">Account name can only contain letters, numbers, and the dash (-) character.</li>
        <li data-bind="visible: showFirstLastDash">The dash (-) character cannot be the first or last character.</li>
        <li data-bind="visible: showConsecutiveDash">Consecutive dash characters are not permitted in the account name.</li>
        <li data-bind="visible: showLowerCase">All letters in a account name must be lowercase.</li>
        <li data-bind="visible: showNameLength">Account name must be from 3 to 24 characters long.</li>
        <li data-bind="visible: showUniqueName">Account name must be unique. You already have account with that name.</li>
        <li data-bind="visible: showKeyBase64">Account key must be valid base64 string. Allowed characters are A-Z, a-z, 0-9, '+', '/', and '='</li>
    </ul>
    <input type="button" class="button" value="Create" data-bind="click: submit, value: isNew() ? 'Create' : 'Update'" />
    <a class="close-reveal-modal">&#215;</a>
</div>
